<template>
  <ul class="flex items-center h-full">
    <li
      v-for="spec in listStore.specs"
      :key="spec.id"
      class="text-12px color-white-opacity-6 cursor-pointer ml-32px"
      :class="{ selected: listStore.activeCategoryId === spec.id }"
      @click="change(spec)"
    >
      {{ spec.name }}
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useListStore } from '@renderer/store/modules/list'
const listStore = useListStore()

const change = (spec) => {
  listStore.setActiveCategoryId(spec.id)
  listStore.updateList()
}
</script>

<style scoped>
.selected {
  color: white;
}
</style>
